<template>
    <div class="ctbsc-vip">
        <NavBar pathName="vip" title="开通会员"></NavBar>
        <div class="member-info"  v-if="$store.getters.userInfo&&$store.getters.userInfo.nick_name">
            <div class="avatar"><img :src="$store.getters.userInfo.avatar" alt=""></div>
            <div class="info">
                <div class="info-name" >
                    <!--<div class="member-type">{{$store.getters.userInfo.id}}</div>-->
                    <div class="member-type">{{$store.getters.userInfo.nick_name}}</div>
                    <div class="member-type-icon" v-if="$store.getters.userInfo&&$store.getters.userInfo.member_type_name"><img src="/static/images/vip_active.png" alt=""></div>
                    <div class="member-type-icon" v-else><img src="/static/images/vip.png" alt=""></div>
                </div>
                <div class="info-des">VIP会员：
                    <span v-if="$store.getters.userInfo&&$store.getters.userInfo.member_type_name">
                        {{$store.getters.userInfo.member_type_name}}会员
                    </span>
                    <span v-else>暂未开通</span>
                </div>
            </div>
        </div>
        <div class="member-info"  v-else>
            <div class="avatar"><img src="/static/images/tx.png" alt=""></div>
            <div class="info">
                <div class="info-name">
                    <div class="member-type" >游客</div>
                    <div class="member-type-icon"><img src="/static/images/vip.png" alt=""></div>
                </div>
                <div class="info-des">VIP会员：<span>暂未开通</span></div>
            </div>
        </div>
        <div class="level-box">
            <div class="member-level">
                <div class="level-title"><b>VIP会员级别</b>
                  <span style="color: red">除首试会员外，会员期内提前购买任何类型会员，享受8.5折优惠,购买后有效期顺延</span>
<!--                  <br/>
                  <span style="color: red;font-size:larger ">双11特惠活动，仅限11.11-11.15，仅5天</span>-->
                </div>
                <div class="level-list">
                    <swiper ref="mySwiper" v-bind:options="swiperOptions">
                        <swiper-slide v-for="(item,index) in memberType" :key="index">
                            <div :class="levelAcitiveIndex==index?'level-item acitve':'level-item'" @click="selectLevel(index)">
                                <div class="level-item-title">{{item.title}}</div>
                                <div class="level-item-des">{{item.during}}</div>
                                <div class="level-item-price">￥{{item.price}}</div>
                                <div v-if="item.stand_price!=item.price"
                                     style="text-decoration:line-through;color:#ccc;font-size: 3.8vw" class="level-item-price">￥{{item.stand_price}}</div>
                                <div v-else
                                     style="text-decoration:line-through;" class="level-item-price">&nbsp</div>


                                <div class="level-item-tips">{{item.desc}}</div>
                            </div>
                        </swiper-slide>
                    </swiper>
                </div>
                <div class="select-tips" v-if="memberType.length>0">
                    选择了 <b>{{memberType[levelAcitiveIndex].title}}</b>
                </div>
                <div class="select-tips" v-else>
                    请选择会员类型
                </div>
            </div>
            <div class="pay-box">
                <div class="pay-btn">
                    <van-button style="width: 100%;" round type="primary" @click="wechatPay">微信支付</van-button>
                </div>
                <div class="pay-tips">虚拟产品，一经支付，概不退款</div>
            </div>
        </div>

        <div class="member-benefits">
            <div class="title">
                <div class="title-icon"><img src="/static/images/qy_left_icon.png" alt=""></div>
                <div class="title-word">VIP会员权益</div>
                <div class="title-icon"><img src="/static/images/qy_right_icon.png" alt=""></div>
            </div>
            <div class="ben-des">
                <div class="article-content" style="font: 12px/1.5 Microsoft YaHei,PingFang,Heiti SC">
                    <section data-role="outer" label="Powered by 135editor.com" style="">
                        <section data-role="outer"  label="Powered by 135editor.com" style="">
                            <p style="vertical-align:inherit;line-height: 1.75em;"><span
                                    style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益一：</span><span
                                    style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"><span
                                    style="color: rgb(0, 0, 0); font-size: 16px; caret-color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;"></span><span
                                    style="caret-color: rgb(255, 0, 0); font-size: 16px; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">5年老平台</span><span
                                    style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"><span
                                    style="color: rgb(0, 0, 0); font-size: 16px; caret-color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">➕</span><span
                                    style="font-size: 16px; caret-color: red; color: rgb(255, 0, 0); font-family: 楷体, 楷体_GB2312, SimKai;">全站内容不限次数下载</span><span
                                    style="font-size: 16px; caret-color: red;">➕</span><span
                                    style="font-size: 16px; caret-color: red; color: #FF0000;">未来365天在</span><span
                                    style="font-size: 16px; caret-color: red;">（</span><span
                                    style="font-size: 16px; caret-color: red; color: #FF0000;">网站</span><span
                                    style="font-size: 16px; caret-color: red;">➕</span><span
                                    style="font-size: 16px; caret-color: red; color: #FF0000;">会员群</span><span
                                    style="font-size: 16px; caret-color: red;">）</span><span
                                    style="font-size: 16px; caret-color: red; color: #FF0000;">获取每天更新的最新材料</span><span
                                    style="font-size: 16px; caret-color: red;">➕</span><span
                                    style="font-size: 16px; caret-color: red; color: #FF0000;">内部整理写作必备资料包</span><span
                                    style="font-size: 16px; caret-color: red;">；</span></span></span></p>
                            <p style="vertical-align:inherit;line-height: 1.75em;"><br></p>
                            <p style="vertical-align:inherit;line-height: 1.75em;">
                              <span
                                    style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益二：</span>
                              <span
                                    style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;">在线查阅/下载网站所有素材；
                                <span
                                    style="font-size: 16px; color: rgb(255, 0, 0); font-family: 楷体, 楷体_GB2312, SimKai;"></span>，跟随年度任务走，什么阶段什么任务，出什么材料，<span
                                    style="font-size: 16px; color: rgb(255, 0, 0); font-family: 楷体, 楷体_GB2312, SimKai;">每日更新</span>，任意下载；</span>
                            </p>
                            <p style="vertical-align:inherit;line-height: 1.75em;"><br></p>
                            <p style="vertical-align:inherit; line-height: 1.75em;"><span
                                    style="font-size: 16px; color: rgb(0, 176, 80); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">会员权益三：</span><span
                                    style="color: rgb(0, 0, 0); font-size: 16px; display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;"><span
                                    style="color: rgb(255, 0, 0); font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"></span><span
                                    style="font-size: 16px; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">专属客服一对一帮您找材料</span>，全天18小时在线服务，随时可为您找材料！客服微信：<span
                                    style="font-size: 16px; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">ctbsc2021</span></span>
                            </p>
                            <p style="vertical-align:inherit; line-height: 1.75em;"><br></p>
                            <p style="vertical-align:inherit; line-height: 1.75em;"><span
                                    style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益四：</span><span
                                    style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;">开通会员后，可在<span
                                    style="font-size: 16px; caret-color: red; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">微信公众号端/电脑端</span>浏览器同步使用；</span>
                            </p>
                            <p style="vertical-align:inherit; line-height: 1.75em;"><br></p>
                            <p style="vertical-align:inherit; line-height: 1.75em;"><span
                                    style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益五：</span><span
                                    style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"><span
                                    style="color: rgb(255, 0, 0); font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"></span>会员用户在会期内续费，享受<span
                                    style="font-size: 16px; color: rgb(255, 0, 0); font-family: 楷体, 楷体_GB2312, SimKai;">9折</span>优惠;</span>
                            </p>
                            <p style="vertical-align:inherit; line-height: 1.75em;"><br></p>
                            <p style="vertical-align:inherit; line-height: 1.75em;"><span
                                    style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益六：</span><span
                                    style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"><span
                                    style="font-size: 16px; color: rgb(255, 0, 0); font-family: 楷体, 楷体_GB2312, SimKai;">会员专享资料</span>，个别专题资料不想大海捞针式下载，可以联系客服私发单个专题资料包。</span>
                            </p>
                            <p style="vertical-align:inherit; line-height: 1.75em;"><br></p>
                            <p style="vertical-align:inherit; line-height: 1.75em;"><span
                                    style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益七：</span><span
                                    style="caret-color: rgb(255, 0, 0); font-size: 16px; color: rgb(0, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">添加客服微信：ctbsc2021，进入<span
                                    style="caret-color: rgb(255, 0, 0); font-size: 16px; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">会员群</span>➕<span
                                    style="caret-color: rgb(255, 0, 0); font-size: 16px; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">领取资料包</span>！</span>
                            </p>
                            <p style="vertical-align:inherit;"><img
                                    src="/static/picture/F1h1PxsJ0PzjPp1.png"
                                    width="100%" alt="F1h1PxsJ0PzjPp1.png"
                                    style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                    data-ratio="0.5555555555555556" data-w="900"></p>
                          <!--<p style="vertical-align:inherit;"><br></p>
                          <p style="vertical-align:inherit;"><span style="color: #FF0000;"><span
                                  style="color: #FF0000;">【额外赠送】内部整理</span>写作必备资料库介绍</span>：</p>
                          <p style="vertical-align:inherit;"><br></p>
                          <p style="vertical-align: inherit;"><img
                                  src="http://qiniu.rulaixiezuo.com/png/2022/01/DymMZcgYXA4yYcQ.png"
                                  width="100%" alt="DymMZcgYXA4yYcQ.png"
                                  style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                  data-ratio="0.9007971656333038" data-w="1129"></p>
                          <p style="vertical-align: inherit;"><img
                                  src="/static/picture/HP1xGvssRvJ4XGj.jpg"
                                  width="100%" alt="HP1xGvssRvJ4XGj.jpg"
                                  style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                  data-ratio="1.3907692307692308" data-w="1300"></p>
                          <p style="vertical-align: inherit;"><img
                                  src="/static/picture/XZdEca9wA3b03Wg.jpg"
                                  width="100%" alt="XZdEca9wA3b03Wg.jpg"
                                  style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                  data-ratio="1.166538164996145" data-w="1297"></p>
                          <p style="vertical-align: inherit;"><img
                                  src="/static/picture/jj8Ksh1GKJm22P6.jpg"
                                  width="100%" alt="jj8Ksh1GKJm22P6.jpg"
                                  style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                  data-ratio="1.3692307692307693" data-w="1300"></p>
                          <p style="vertical-align: inherit;"><img
                                  src="/static/picture/spM1XvXC5ycmmqP.jpg"
                                  width="100%" alt="spM1XvXC5ycmmqP.jpg"
                                  style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                  data-ratio="1.5096227867590455" data-w="1299"></p>
                          <p style="vertical-align: inherit;"><img
                                  src="/static/picture/Egy38k5Tjac8JBp.jpg"
                                  width="100%" alt="Egy38k5Tjac8JBp.jpg"
                                  style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                  data-ratio="1.2192307692307693" data-w="1300"></p>
                          <p style="vertical-align: inherit;"><img
                                  src="/static/picture/mGP0VLl00fgfGGV.jpg"
                                  width="100%" alt="mGP0VLl00fgfGGV.jpg"
                                  style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                  data-ratio="0.24761904761904763" data-w="840"></p>
                          <p style="vertical-align: inherit;"><img
                                  src="/static/picture/uY3B72Be4t5rXRF.jpg"
                                  width="100%" alt="uY3B72Be4t5rXRF.jpg"
                                  style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                  data-ratio="0.35144927536231885" data-w="828"></p>
                          <p style="vertical-align: inherit;"><img
                                  src="/static/picture/ii1H11gYGQ971v4.jpg"
                                  width="100%" alt="ii1H11gYGQ971v4.jpg"
                                  style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                  data-ratio="0.7847478474784748" data-w="813"></p>
                          <p style="vertical-align: inherit;"><img
                                  src="/static/picture/JBrs84WpS4S4X7a.jpg"
                                  width="100%" alt="JBrs84WpS4S4X7a.jpg"
                                  style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                  data-ratio="0.14514145141451415" data-w="813"></p>
                          <p style="vertical-align: inherit;"><img
                                  src="/static/picture/pdDDn0zYZmWdwDY.jpg"
                                  width="100%" alt="pdDDn0zYZmWdwDY.jpg"
                                  style="max-width: 100% !important;box-sizing:border-box;caret-color: red; vertical-align: inherit; width: 100%;"
                                  data-ratio="0.6059113300492611" data-w="812"><br></p>
                          <p style="vertical-align: inherit;"><br></p>-->
                            <section class="_135editor" data-role="paragraph"><p
                                    style="vertical-align:inherit;"><br></p></section>
                        </section>
                    </section>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {swiper, swiperSlide} from "vue-awesome-swiper";
    import "swiper/swiper-bundle.css";
    import NavBar from "@/components/NavBar.vue";
    export default {
        name: "VipView",
        components: {
            swiper,
            swiperSlide,
            NavBar
        },
        data() {
            return {
                memberType: [],
                itemPay: {},
                showLogin: false,
                showPay: false,
                showCustomer:false,
                levelAcitiveIndex:0,
                swiperOptions: {
                    loop: false,
                    slidesPerView: 3,
                    spaceBetween: 10
                },

            };
        },

        created() {
            this.$utils.setPageTitle('开通会员')
            this.showMemberType();
        },
        mounted:function(){
            this.$nextTick(()=>{
                window.scrollTo(0,0)
            });
        },
        methods: {
            selectLevel(index){
              this.levelAcitiveIndex=index;
            },
            wechatPay(item) {

                let type=this.memberType[this.levelAcitiveIndex].key;
                this.$apis.buyMember({type:type}).then(res => {
                    // console.log(res);
                    // out_trade_no
                    if(res.records&&Object.keys(res.records).length>0){
                        let payData=res.records;
                        this.$utils.wechatPay(this,payData, ()=> {
                            this.getUserInfo()
                        })
                    }else{
                        this.$toast({
                            message: '获取支付信息失败，请重试',
                        });
                    }
                })
            },
            getUserInfo() {
                this.$apis.userInfo({}).then(res => {
                    let userInfo = res.records;
                    this.$store.dispatch('user/updateUserInfo', userInfo)
                    // this.$store.dispatch('user/updateToken', token)
                })
            },
            showMemberType() {
                this.$apis.showMemberType().then(res => {
                    this.memberType = res.records.map_type;

                })
            },
        }
    };
</script>
<style lang="less">
    .ctbsc-vip{
        background: #f8f8f8;
    }
    .member-info{

        background: #3a3939;
        display: flex;
        align-items: center;
        padding:30px 15px;
        .avatar{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right:10px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .info{
            height: 100%;

            .info-name{
                display: flex;
                .member-type{
                    font-size:16px;
                    color:#ffe2b4;
                    font-weight: bold;
                    margin-right:10px;
                }
                .member-type-icon{
                    width: 54px;
                    height: 20px;
                    font-size:0px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .info-des{
                font-size:12px;
                color: #fff;
                opacity: .7;
                margin-top:15px;
            }
        }
    }
    .level-box{
        padding:10px 15px;
        background: #fff;
        .member-level{

            .level-title{
                b{
                    font-size:16px;
                }
                span{
                    font-size:14px;
                    color: #999;
                    margin-left:10px;
                }

            }
            .level-list{
                margin-top:20px;
                text-align: center;
                min-height: 126px;
                .level-item{
                    border: 0.02rem solid #dadada;
                    border-radius: 0.2rem;
                    width: 100%;
                    box-sizing: border-box;
                    &.acitve{
                        border:.02rem solid #1AA97B;
                        .level-item-title{
                            color:#1AA97B;
                        }
                        .level-item-des{
                            color:#1AA97B;
                        }
                        .level-item-price{
                            color:#1AA97B;
                        }

                    }
                    .level-item-title{
                        font-size:18px;
                        margin-top:10px;
                    }
                    .level-item-des{
                        font-size:12px;
                        margin-top:10px;
                    }
                    .level-item-price{
                        font-size:18px;
                        font-weight: bold;
                        margin-top:10px;
                    }
                    .level-item-tips{
                        font-size:12px;
                        margin-top:5px;
                        margin-bottom:10px;
                        color:#F44336;
                        font-weight: bold;
                    }
                }
            }
            .select-tips{
                margin-top:10px;
                text-align: center;
                font-size:14px;
                b{
                    font-size:16px;
                }
            }
        }
        .pay-box{
            margin-top:10px;
            .pay-btn{

            }
            .pay-tips{
                margin-top:10px;
                font-size:14px;
                color:#9E9E9E;
                text-align: center;
            }
        }
    }

    .member-benefits{
        margin-top:10px;
        padding:15px 15px;
        background: #fff;
        .title{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom:20px;
            .title-icon {
                width: 54px;
                height: 10px;
                font-size:0px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .title-word{
                margin:0px 10px;
                font-size:18px;
                font-weight: bold;
            }
        }
        .ben-des{
            p{
                margin:0px 0px;
                padding:0px 0px;
            }
        }
    }

</style>
<style scoped>


</style>



